<template>
	<view class="container" v-if="isLogin">
		<block v-if="cartList.length > 0">
			<view class="top">
				<scroll-view class="scroll-view_H" scroll-x="true" v-for="(item,index) in cartList" :key="item.id">
					<view class="cartInfo">
						<view class="cartInfochild">
							<!-- 选择框 -->
							<view class="cartInfo_switch common">
								<!-- 点击当前商品 -->
								<switch @change="checkedOne($event,index)" type="checkbox" :checked="item.checked == 1?true:false" />
							</view>
							<!-- 图片 -->
							<view class="cartInfo_image common">
								<image :src="item.img" mode=""></image>
							</view>

							<!-- 信息 -->
							<view class="cartInfo_info">
								<label for="" style="font-size: 26rpx;">{{item.goodsname}}</label>
								<label for="" style="font-size: 24rpx; color: #ccc;">规格：白色</label>
								<label for="" style="color: red;">￥{{item.price}}</label>
							</view>
							<!-- 加减数量 -->
							<view class="cartInfo_num">
								<view class="cartInfo_num_child">
									<label for="" @click="jian(index)">-</label>
									<label for="">{{item.num}}</label>
									<label for="" @click="jia(index)">+</label>
								</view>
							</view>
						</view>

					</view>
					<view class="cartDel" @click="delGoods(item.id,index)">
						<label for="">删除</label>
					</view>
				</scroll-view>
			</view>
			<!-- 底部 -->
			<view class="foot">
				<view class="footd1">
					<switch type="checkbox" :checked="_checkAll" @change="checkedAll($event)" />
					<label>全选</label>
				</view>
				<view class="footd2">
					<view class="footd2sp1">总计：￥<label style="color: red;">{{_totalPrice}}</label></view>
					<label class="footd2sp2">不含运费，已优惠￥0.00</label>
				</view>
				<!-- 跳到提交订单，结算页面 -->
				<view class="footd3" @click="confirm">
					<!-- 被选中的商品的个数 -->
					<label>去结算({{_totalNum}}件)</label>
				</view>
			</view>
		</block>
		<!-- 登录了但没有数据 -->
		<block v-else>
			<view class="con">
				您的购物车为空
			</view>
		</block>

	</view>
	<view class="box" v-else>
		<image src="./tips1.png" mode="widthFix" class="png"></image>
		<view class="txt">
			可以先去登录哦
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [],
				num: 1,
				isLogin: false
			}
		},
		onShow() {
			this._cartList()
		},
		computed: {
			// 总数数量
			_totalNum() {
				let total = 0;
				this.cartList.forEach((item, index) => {
					if (item.checked == 1) {
						total += item.num
					}
				})
				return total
			},

			// 总价
			_totalPrice() {
				let total = 0;
				this.cartList.forEach((item, index) => {
					if (item.checked == 1) {
						total += item.price * item.num
					}
				})
				return total
			},
			_checkAll() {
				this.cartList=this.cartList||[]
				let res = this.cartList.every((item) => {
					return item.checked == 1
				})
				return res
			}


		},
		methods: {
			// #ifdef MP-ALIPAY
					jian(index) {
						this.cartList[index].num--
						if (this.cartList[index].num < 1) {
							this.cartList[index].num = 1
						}
						this._editCart(index)
					},
					jia(index) {
						this.cartList[index].num++
						this._editCart(index)
					},
			// #endif
			jian(index) {
				this.cartList[index].num--
				if (this.cartList[index].num < 1) {
					this.cartList[index].num = 1
				}
				this._editCart(index)
			},
			jia(index) {
				this.cartList[index].num++
				this._editCart(index)
			},
			async _cartList() {
				let data = {
					uid: uni.getStorageSync("uid")
				}
				let header = {
					authorization: uni.getStorageSync("token")
				}
				let res = await this.$Api._cartlist(data, header)
				console.log(res)
				if (res.data.code == 403) {
					// 判断是否正常登录
					uni.showToast({
						title: "登录过期,请登录",
						icon: "none"
					})
					this.isLogin = false
				} else if (res.data.code == 500) {
					uni.showToast({
						title: "请登录",
						icon: "none"
					})
					this.isLogin = false
				} else {
					// 已经登录
					if (res.data.list != null) {
						// 有数据
						res.data.list.map((item) => {
							item.img = this.$baseUrl + item.img
						})
						this.cartList = res.data.list;
					}else{
						this.cartList=[]
					}
					this.isLogin = true;

				}

				// console.log(this.cartList)
			},
			// 全选按钮
			checkedAll(e) {
				if (e.detail.value) {
					// ，每一项都选中
					this.cartList.map((item) => {
						item.checked = 1
					})

				}
				this.cartList.map((item, index) => {
					this._editCart(index)
				})
			},
			// 单选
			checkedOne(e, index) {
				this.cartList[index].checked = e.detail.value
			},
			// 修改购物车数据
			async _editCart(index) {
				// data查询条件
				let {
					id,
					num,
					checked
				} = this.cartList[index];
				// console.log(id,num,checked)
				let res = await this.$Api._cartedit({
					id,
					num,
					checked
				}, {
					authorization: uni.getStorageSync("token")
				})

			},
			// 删除
			async delGoods(id, index) {
				let res = await this.$Api._cartdelete({
					id
				}, {
					authorization: uni.getStorageSync("token")
				})
				console.log(res)
				if (res.data.code == 200) {
					this.cartList.splice(index, 1)
				}
			},
			confirm(){
				// 过滤 找出选中的项
				let arr = this.cartList.filter((v)=>{
					return v.checked == 1
				}) 
				console.log(arr)
				if(arr.length<=0){
					uni.showToast({
						title:"至少选择一个商品",
						icon:"none"
					})
					return
				}
				uni.setStorageSync("carts",arr)
				uni.navigateTo({
					url:"../confirm/confirm"
				})
			}
		},

	}
</script>

<style>
	@import url("../../common/css/cart.css");

	.cartInfo_image_img {
		width: 120rpx;
		height: 120rpx;
	}

	.foot {
		bottom: var(--window-bottom)
	}

	.png {
		width: 500rpx;

	}
	uni-page-body{
		height: 100%;
	}
	.box {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.txt{
		color: #666;
		margin-top: 30rpx;
	}
	.con{
		font-size: 34rpx;
		text-align: center;
		margin-top: 50%;
		color: #666;
		font-weight: 600;
	}
</style>
